body {
    background-color: var(--sapBackgroundColor);
}

#toolbars-container {
    container: wrapper / inline-size;
}
.main-wrapper {
    display:flex;
    width: 100%;
    flex-wrap: nowrap;
}
.dynamic-title-wrapper {
    display: flex;
    align-items: center;
}
.dynamic-title-wrapper ui5-toolbar {
    border-bottom-color: transparent;
}
.first-toolbar-wrapper {
    flex: 1;
    min-width: 1px;
}
.third-toolbar-wrapper,
.second-toolbar-wrapper {
    flex: 0 1;
}
@container wrapper (max-width: 700px) {
    .main-wrapper {
        flex-direction: column;
    }
    .actions-wrapper {
        flex-direction: column;
    }
    .first-toolbar-wrapper {
        order: 2;
    }
    .third-toolbar-wrapper {
        order: 1;
    }
    .second-toolbar-wrapper {
        display: none;
    }
    .dynamic-title-wrapper {
        align-items: flex-start;
    }
}

@container wrapper (max-width: 500px) {
    .main-title {
        font-size: 16px;
    }
}

.content-wrapper {
    flex-shrink: 1.6;
    flex-grow: 1;
    min-width: 0;
    align-self: center;
}

.title-wrapper {
    flex-shrink: 1;
    flex-grow: 0;
    min-width: 0;
}

.actions-wrapper {
    flex-shrink: 1.6;
    min-width: 3rem;
    flex-grow: 1;
    display: flex;
}